<template>
  <div id="app">
    <transition name="el-zoom-in-center">
      <div v-show="show3">
        <div class="sidebar">
          <div style="display:flex;justify-content:space-between;height: 100%;width: 100%">
            <div class="leftlist">
              <el-menu background-color="#2e3238" router
                       class="el-menu-vertical-demo"
                       active-text-color="#67C23A"
                       text-color="#fff"
                       :collapse="isCollapse">
                <el-menu-item index="" style="padding-left: 10px;margin:10px 0px 20px 2px">
                  <el-tooltip effect="light" placement="right-start" popper-class="el-scrollbar">
                    <div slot="content">
                      <div style="margin-top: 5px;font-size: 13px;lineHeight:1.5;">
                        <div>账号：{{user.userName?user.userName:'无'}}</div>
                        <div>用户名：{{user.nickName?user.nickName:'无'}}</div>
                        <div>手机号码：{{user.phonenumber?user.phonenumber:'无'}}</div>
                        <div>邮箱：{{user.email?user.email:'无'}}</div>
                        <div>备注：{{user.remark?user.remark:'无'}}</div>
                      </div>
                    </div>
                    <img class="avatar"
                         :src="user.avatar"
                         onerror="this.src='http://localhost/dev-api/profile/upload/2021/12/16/2d1cde4d-3ba7-407f-82e1-0663e24318e4.jpg'"
                         :alt="user.nickName"></el-tooltip>
                </el-menu-item>
              </el-menu>
            </div>
            <div id="list" style="overflow:hidden">
              <div style="height:700px;width:100%;overflow-x: hidden">
                <div class="innerbox">
                  <ul style="padding-left: 0px; overflow-x: hidden;">
                    <scroll-view
                      class="my-scroll-bars">
                      <li v-for="(item,index) in hrs" :id="index"
                          :key="index"
                          style="position:relative;"
                          :class="{ active: currentSession?item.userName === currentSession.userName:false}"
                          @click="changeCurrentSession(item)">
                        <img class="avatar" :src="item.avatar" onerror="this.src='http://localhost/dev-api/profile/upload/2021/12/16/2d1cde4d-3ba7-407f-82e1-0663e24318e4.jpg'">
                        <el-badge :is-dot="item.messageNum">
                          <p class="name">{{item.nickName}}</p>
                        </el-badge>
                        <p class="name" style="position:absolute;right:30px;top:8px;color:#1ab394;font-size:20px" v-if="item.userType == '微信用户'">微</p>
                      </li>
                    </scroll-view>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div
            :class="['meun-switch animated flex-row ys-float-btn',uploadflag ? 'active rubberBand off' : 'leave jello']"
            @mouseleave="uploadleave"
            @mouseenter="uploadenter"
            v-if="uploadShow"
          >
          </div>
        </div>
        <div class="main">
          <el-divider content-position="left">
            <font style="font-weight:bold;font-size:20px;margin-bottom: 20px">{{currentSession.nickName}}</font>
          </el-divider>
          <!-- 聊天显示屏 -->
          <div v-loading="loading"
               element-loading-text="拼命加载中"
               element-loading-background="rgba(255, 255, 255, 1)">
            <scroll-view class="my-scroll-bar">
              <div>
                <ul v-if="currentSession != ''" id="message" class="innerbox">
                  <li v-if="localSocket">
                    <p style="text-align: center;margin-bottom:30px;color: #8492a6;font-size: 14px;" @click="load" >
                      <span>· · · · · 点击加载 · · · · ·</span>
                    </p>
                  </li>
                  <li v-else>
                    <p style="text-align: center;margin-bottom:30px;color: #1f2d3d;font-size: 14px;">
                      <span>· · · · · 到顶了 · · · · ·</span>
                    </p>
                  </li>

                  <li v-for="(entry, index) in messages" :id="index" :key="index" >
                    <p class="time">
                      <span v-if="entry.split(' * ')[0] != ''">{{entry.split(' * ')[0]}}</span>
                      <span v-else></span>
                    </p>
                    <div class="main2" v-if="entry.split(' * ')[1] == currentSession.userName">
                      <img class="avatar" :src="currentSession.avatar" alt="">
                      <p class="text-img" v-if="entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'jpg' || entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'jpeg' || entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'png' || entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'gif'">
                        <img :src="entry.split(' * ')[2]" style="max-height: 200px;" @click="enlargePicture(entry.split(' * ')[2])"
                             onerror="this.src='http://localhost/dev-api/profile/upload/2021/12/16/2d1cde4d-3ba7-407f-82e1-0663e24318e4.jpg'">
                      </p>
                      <p class="text" v-else>{{entry.split(' * ')[2]}}</p>
                    </div>
                    <div class="main3" v-else>
                      <img class="avatar" :src="user.avatar" alt="">
                      <p class="text-img" v-if="entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'jpg' || entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'jpeg' || entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'png' || entry.split(' * ')[2].split('.')[entry.split(' * ')[2].split('.').length-1] == 'gif'">
                        <img :src="entry.split(' * ')[2]" style="max-height: 200px;" @click="enlargePicture(entry.split(' * ')[2])"
                             onerror="this.src='http://localhost/dev-api/profile/upload/2021/12/16/2d1cde4d-3ba7-407f-82e1-0663e24318e4.jpg'">
                      </p>
                      <p class="text" v-else>{{entry.split(' * ')[2]}}</p>
                    </div>
                    <!-- 图片放大预览显示弹出框  -->
                    <el-dialog :visible.sync="phone" :close-on-click-modal="false" :append-to-body="true">
                      <img v-if="messagePicture" :src="messagePicture" width="100%" alt="">
                    </el-dialog>
                  </li>

                  <li v-if="messages.length == 0">
                    <p style="text-align: center;margin-bottom:30px;color: #1f2d3d;font-size: 16px;">
                      <i class="el-icon-guide" style="display: block;font-size: 60px;margin: 20px 0;"></i>
                      <span>亲，您暂无聊天记录哦！</span>
                    </p>
                  </li>

                </ul>

                <ul v-else>
                  <li>
                    <p style="text-align: center;margin-bottom:30px;color: #1f2d3d;font-size: 16px;">
                      <i class="el-icon-chat-dot-square" style="display: block;font-size: 60px;margin: 20px 0;"></i>
                      <span>欢迎使用聊天会话！</span>
                    </p>
                  </li>
                  <li style="text-align: center;">
                    <img style="height: 200px;width: 306px;margin-bottom: 105px;" src="../../../assets/images/liaotian.gif">
                  </li>
                </ul>

              </div>
            </scroll-view>
          </div>

          <!-- 图片选择器、其他功能按钮 -->
          <div style="height:40px;border-top: dashed 2px #999093;">
            <el-upload
              :limit="1"
              :http-request="((val)=>{return myUpload(val)})"
              :before-upload="handleBeforeUpload"
              action=""
              :show-file-list="false"
              :file-list="photoNow">
              <i class="el-icon-picture" style="font-size: 26px;margin: 7px 10px;"/>
            </el-upload>
          </div>

          <!-- 文本输入框 -->
          <div id="uesrtext">
            <textarea v-model="content" autofocus="autofocus" style="font-size:18px"> </textarea>
            <div style="background-color:#fff;float: right;">
              <el-button type="success"
                         size="mini"
                         style="margin:0 20px 10px 10px"
                         @click="sendMessage"
                         plain>发送(S)
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
import screenfull from 'screenfull';
import { getUserProfile, listUserEasy } from "@/api/system/user";
import { listMessageAll, listUnread, addMessage, addMessageUpload, updateMessage } from "@/api/fuw/message";

export default {
  name: 'chat',
  data() {
    return {
      // 图片大屏预览
      photoNow: [],
      phone: false,
      messagePicture: '',
      // 遮罩层
      loading: true,
      // 默认不全屏
      isFullscreen: false,
      show3: false,
      uploadShow: false,
      uploadflag: true,
      // all
      hrs: [], // 查询的列表用户
      isDot: [], // 有无新消息列表
      sessions: '',
      currentSession: [], // 存放当前点击用户信息
      // list
      isCollapse: true,
      user: [],
      // goeasy
      msg: '',
      msgList: [],
      messages: [], // 聊天记录
      content: "", // 需要发送的消息
      // unread
      unread: '', // 未读消息人员
      // 滚动加载
      localSocket: false,
      // 历史记录的时间
      nowHostTime: ''
    }
  },
  created() {
    this.left = document.documentElement.clientWidth - 50;
    this.top = document.documentElement.clientHeight*0.8;

    getUserProfile().then(response => {
      let self = this;
      response.data.avatar = 'http://localhost/dev-api/' + response.data.avatar;
      self.user = response.data;
    });

    // 查询未读
    this.listUnread();

    setTimeout(()=>{
      listUserEasy().then(response => {
        response.data.forEach((item, index) => {
          if(item.userName != this.user.userName){
            const mesaAge = item;
            mesaAge.messageNum = false;
            // 分离未读
            const unreadList = this.unread.split(",");
            unreadList.forEach(unreadNow => { // 未读消息红点提示
              if(unreadNow == mesaAge.userName){
                mesaAge.messageNum = true;
              }
            });
            this.hrs.push(mesaAge);
          }
        })
      });
    },100)
    console.log(this.hrs)

    this.startGoEasy();

    setTimeout(()=>{
      this.loading = false;
    }, 1000);
  },

  mounted: function () {
    this.uploadanimated();
    this.$store.dispatch('connect');
    this.inintview();
    console.log(this.messages.length)
  },

  methods: {
    inintview() {
      setTimeout(() => {
        this.show3 = true;
      }, 1000)
    },
    uploadenter() {
      this.uploadflag = true;
    },
    uploadleave() {
      this.uploadflag = false;
    },
    uploadanimated() {
      setTimeout(() => {
        this.uploadShow = true;
        setTimeout(() => {
          this.uploadleave();
        }, 1000);
      }, 1000);
    },

    // list
    changeCurrentSession(item) {
      this.loading = true;
      this.currentSession = item;
      this.messages = []; // 清空聊天记录
      item.messageNum = false; // 清空红点
      this.localSocket = false; // 是否能翻页
      this.startGoEasy();

      setTimeout(()=>{
        this.listHostMessage();
      }, 200);
    },

    // goeasy
    startGoEasy(){
      let self = this;
      //连接GoEasy
      this.goEasy.connect({
        id: self.user.userName, //必须指定，否则无法实现客户端上下线监听功能
        data: {"avatar": self.user.avatar,"nickname": self.user.nickName},//更多的用户信息，其它已监听上下线信息的用户，收到该用户上线信息里会包含此部分内容
        onProgress: function(attempts){
          // self.unshiftMessage(self.user.userName + " * " + "GoEasy is connecting"+ attempts);
        },
        onSuccess: function(){
          // self.unshiftMessage(self.user.userName + " * " + "GoEasy connect successfully.");
        },
        onFailed: function(error){
          // self.unshiftMessage(self.user.userName + " * " + "Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
        }
      });
    },
    /**
     * 接收消息
     */
    subscribeMessage(){
      let self = this;
      //接收消息
      this.pubsub.subscribe({
        channel: self.user.userName,
        onMessage: function (message) {
          console.log("消息发送人: " + message.content.split(" * ")[0]);
          console.log("消息接收人: " + message.channel);
          // 消息提示
          let dataNow = [];
          const h = self.$createElement;
          let formattedTime = new Date().formatDate("yyyy-MM-dd hh:mm");
          dataNow.push(h('span', null, '时间: '));
          dataNow.push(h('i', { style: 'color: teal' }, formattedTime));
          dataNow.push(h('div', null, ' '));
          dataNow.push(h('span', null, '消息内容: '));
          dataNow.push(h('i', { style: 'color: teal' }, message.content.split(" * ")[1]));
          dataNow.push(h('div', null, ' '));
          self.$notify({
            title: message.content.split(" * ")[0] + ': ',
            message: h('p', null, dataNow),
            duration: 0
          });
          if(self.currentSession.userName == message.content.split(" * ")[0]){
            self.unshiftMessage(message.content);
          }
          self.hrs.forEach(item => {
            if(item.userName == message.content.split(" * ")[0]){
              item.messageNum = true;
            }
          })
        },
        onSuccess: function () {
          // self.unshiftMessage(self.user.userName + " * " + '订阅成功.');
        },
        onFailed: function (error) {
          // self.unshiftMessage(self.user.userName + " * " + "订阅失败，错误编码："+error.code+" 错误信息："+error.content);
        }
      });
    },
    /**
     * 历史记录
     */
    listHostMessage(){
      let self = this;
      //历史记录清空
      self.msgList = [];
      /**
       * 历史记录 - goeasy查询 ， 保质期1天
       */
      // //历史记录 - 选择的人
      // this.pubsub.history({
      //   channel: self.currentSession.userName, //必需项
      //   // start: 1561347527648, //可选项，开始时间，默认为0，即从第一条消息开始查
      //   // end: 1561347706447, //可选项，结束时间,默认为当前时间
      //   limit: 10, //可选项，返回的消息条数，默认为10条，最多30条
      //   onSuccess: function (response) {
      //     console.log("收到历史消息: "+ JSON.stringify(response));
      //     response.content.messages.forEach(message => {
      //       // 进行记录的筛选
      //       if(message.content.split(' * ')[0] == self.user.userName){
      //         self.msgList.push(message);
      //       }
      //     })
      //   },
      //   onFailed: function (error) { //获取失败
      //     console.log(this.user.userName + " * " + "Failed to obtain history, code:"+error.code+ ",error:"+error.content);
      //   }
      // });
      // //历史记录 - 自己
      // this.pubsub.history({
      //   channel: self.user.userName, //必需项
      //   // start: 1561347527648, //可选项，开始时间，默认为0，即从第一条消息开始查
      //   // end: 1561347706447, //可选项，结束时间,默认为当前时间
      //   limit: 10, //可选项，返回的消息条数，默认为10条，最多30条
      //   onSuccess: function (response) {
      //     console.log("收到历史消息: "+ JSON.stringify(response));
      //     response.content.messages.forEach(message => {
      //       // 进行记录的筛选
      //       if(message.content.split(' * ')[0] == self.currentSession.userName){
      //         self.msgList.push(message);
      //       }
      //     })
      //   },
      //   onFailed: function (error) { //获取失败
      //     console.log("Failed to obtain history, code:"+error.code+ ",error:"+error.content);
      //   }
      // });
      /**
       * 历史记录 - 数据库查询
       */
      //历史记录 - 自己的消息
      let chatYours = {
          from: self.user.userName,
          to: self.currentSession.userName
        };
      listMessageAll(chatYours).then(response => {
        // 调用时间显示
        response.data = self.nowHostTimeUpdate(response.data);

        console.log(response.data.slice(response.data.length - 20,response.data.length));
        self.msgList = response.data.slice(response.data.length - 20,response.data.length);
        if(response.data.length - 20 > 1){
          this.localSocket = true;
        }
        self.msgList.forEach(message => {
          self.unshiftMessageHost(message);
        });
      });
      // 修改消息记录 - 已读
      this.updateMessageChat();

      // 加载中
      setTimeout(()=>{
        // 滑动框置底
        self.$nextTick(function(){
          let div = document.getElementById('message');
          div.scrollTop = 9999;
        })
        this.loading = false;
      }, 1000);
    },
    // 滚动加载
    load () {
      this.loading = true;
      let self = this;
      //历史记录 - 自己的消息
      let chatYours = {
        from: self.user.userName,
        to: self.currentSession.userName
      };
      listMessageAll(chatYours).then(response => {
        // 调用时间显示
        response.data = self.nowHostTimeUpdate(response.data);

        console.log(response.data.length);
        console.log(self.msgList.length);
        let start = (response.data.length - self.msgList.length - 20) > 1 ? (response.data.length - self.msgList.length - 20) : 0;
        if(response.data.length - self.msgList.length > 1){
          self.msgList = response.data.slice(start, response.data.length);
          // 清空messages
          this.messages = [];
          self.msgList.forEach(message => {
            let formattedTime = '';
            if(message.chatTime == ''){
              formattedTime = '';
            }else {
              formattedTime = new Date(message.chatTime).formatDate("yyyy-MM-dd hh:mm");
            }
            let messageNow = formattedTime + " * " + message.from + " * " + message.chatText;
            this.messages.push(messageNow);
          });
        }
        // 判断是否还存在数据
        if(start > 0){
          self.localSocket = true;
        }else{
          self.localSocket = false;
        }
      });
      // 修改消息记录 - 已读
      this.updateMessageChat();

      setTimeout(()=>{
        this.loading = false;
      }, 500);
    },
    /***
     * 发送消息
     ***/
    sendMessage: function () {
      let self = this;
      //发送消息
      const contents = self.user.userName + " * " + this.content;
      if (this.content.trim() !== '') {
        //发送消息
        this.pubsub.publish({
          channel: self.currentSession.userName,
          message: contents,
          onSuccess: function () {
            self.content = "";
            self.unshiftMessage(contents);
            // self.msgSuccess("消息发送成功");
          },
          onFailed: function (error) {
            self.msgError("消息发送失败");
            // self.unshiftMessage("消息发送失败，错误编码："+error.code+" 错误信息："+error.content);
          }
        });
        // 新增消息记录
        this.addMessageChat();
      }
    },
    /** 图片上传 **/
    // 图片上传之前的判断
    handleBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt1M = file.size / 1024 / 1024 / 2 < 1
      if (!isIMAGE) {
        this.$message.error('上传文件只能是jpg或png图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 2 MB!')
      }
      return isIMAGE && isLt1M
    },
    // 图片的上传调用方法
    async myUpload(file) {
      this.photoNow = [];
      this.formData = file.file;
      // 调用图片上传方法
      let formData = new FormData();
      formData.append("file", this.formData);
      await addMessageUpload(formData).then(response => {
        console.log(response.msg);
        // 更新消息内容
        this.content = response.msg
      });
      // 发送信息
      await this.sendMessage();
      // 清空消息内容
      this.content = "";
    },
    // 图片放大预览
    enlargePicture(image){
      this.phone = true;
      this.messagePicture = image;
    },

    unshiftMessage(content) {
      // 如果两次聊天的时间相差5分钟就显示时间
      let formattedTime = new Date().formatDate("yyyy-MM-dd hh:mm");
      let nowHostTimeNums = this.timeEnd(this.nowHostTime);
      let formattedTimeNums = this.timeEnd(formattedTime);
      if((formattedTimeNums - nowHostTimeNums)/60 > 2){
        this.nowHostTime = formattedTime;
      }else{
        formattedTime = '';
      }

      let message = formattedTime + " * " + content;
      this.messages.push(message)

      // 滑动框置底
      this.$nextTick(function(){
        let div = document.getElementById('message');
        div.scrollTop = 9999;
      });
    },
    unshiftMessageHost(message) {
      let formattedTime = '';
      if(message.chatTime == ''){
        formattedTime = '';
      }else {
        formattedTime = new Date(message.chatTime).formatDate("yyyy-MM-dd hh:mm");
      }
      let messageNow = formattedTime + " * " + message.from + " * " + message.chatText;
      this.messages.push(messageNow);

      // 滑动框置底
      this.$nextTick(function(){
        let div = document.getElementById('message');
        div.scrollTop = 9999;
      })
    },

    /** 时间显示 **/
    nowHostTimeUpdate(response){
      // 消除response.data中重复的time
      response.forEach(item => {
        let nowTime = item.chatTime.split(":")[0] + ':' + item.chatTime.split(":")[1];
        if(this.nowHostTime != ''){
          // 如果两次聊天的时间相差5分钟就显示时间
          let nowHostTimeNums = this.timeEnd(this.nowHostTime);
          let nowTimeNums = this.timeEnd(nowTime);
          if((nowTimeNums - nowHostTimeNums)/60 > 5){
            this.nowHostTime = nowTime;
          }else{
            item.chatTime = '';
          }
        }else{
          this.nowHostTime = nowTime;
        }
      });
      return response;
    },
    // 时间格式化为时间戳
    timeEnd(time){
      let year = time.split(" ")[0].split("-")[0];
      let mouth = time.split(" ")[0].split("-")[1];
      let day = time.split(" ")[0].split("-")[2];
      let hour = time.split(" ")[1].split(":")[0];
      let minute = time.split(" ")[1].split(":")[1];
      return year * 365 * 24 * 60 * 60 +
        mouth * 30 * 24 * 60 * 60 +
        day * 24 * 60 * 60 +
        hour * 60 * 60 +
        minute * 60;
    },

    /** 新增 */
    addMessageChat() {
      let formData = new FormData();
      formData.append("from", this.user.userName)
      formData.append("to", this.currentSession.userName)
      formData.append("chatText", this.content)

      addMessage(formData).then(response => {
        this.subscribeMessage();
      });
    },
    /** 修改 - 消息已读 */
    updateMessageChat() {
      let formData = new FormData();
      formData.append("from", this.user.userName)
      formData.append("to", this.currentSession.userName)

      updateMessage(formData).then(response => {
        this.subscribeMessage();
      });
    },
    /** 查询 - 消息未读 */
    listUnread() {
      let formData = new FormData();
      formData.append("to", this.user.userName)

      listUnread(formData).then(response => {
          console.log(response.msg);
          this.unread = response.msg;
          if(response.msg != ""){
            this.msgSuccess("您有新的消息");
          }
      });
    },
    /** 在父组件点击打开聊天框时，滚动条置底 **/
    scrollTopEnd(){
      this.loading = true;
      // 加载中
      setTimeout(()=>{
        // 滑动框置底
        this.$nextTick(function(){
          let div = document.getElementById('message');
          div.scrollTop = 9999;
        })
        this.loading = false;
      }, 100);
    },
  }
}
</script>

<style lang="scss" scoped>
.off{
  -webkit-animation:1s seconddiv;
  background: transparent;
}

@keyframes seconddiv{
  0% {transform: scale(1.4,1.4);}
  10% {transform: scale(1,1);}
  25% {transform: scale(1.2,1.2);}
  50% {transform: scale(1,1);}
  70% {transform: scale(1.2,1.2);}
  100% {transform: scale(1,1);}
}
.meun-switch {
  position: fixed;
  top: 90px;
  left: 0px;
  z-index: 2001;
  cursor: pointer;
  width: 150px;
  height: 150px;
  padding: 5px;
  transition: all 0.25s;

  &.leave {
    left: -65px;
  }

  &.active {
    left: 0;
  }

  &:hover {
    transform: scale(1.02);
  }

  img {
    width: 120px;
    height: 120px;
  }
}

#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
  overflow: hidden;
}

#app {
  /*背景裁剪在背景边框内部*/
  background-clip: padding-box;
  /*// 边框样式*/
  border: 1px solid #eaeaea;
  /*// 边框阴影*/
  box-shadow: 0 0 25px #cac6c6;
  margin: 60px auto;
  width: 1100px;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  overflow-x: hidden;

  .sidebar,
  .main {
    height: 100%;
    .my-scroll-bar {
      margin-top: 10px;
      height: 450px;
      overflow-x: hidden;
    }
    #message {
      padding: 10px 0px;
      height: 440px;
      background: transparent;
      list-style: none;
      overflow-x: hidden;
      ul {
        list-style-type: none;
        padding-left: 0px;
        overflow-x: hidden;
        li {
          margin-bottom: 5px;
        }
      }
      .time {
        text-align: center;
        margin: 7px 0;
        > span {
          display: inline-block;
          padding: 0 18px;
          font-size: 12px;
          color: #6a6a6a;
          //background-color: #dcdcdc;
          border-radius: 2px;
        }
      }
      .main2 {
        .avatar {
          float: left;
          margin: 0 10px 0 10px;
          border-radius: 3px;
          width: 30px;
          height: 30px;
        }
        .text {
          display: inline-block;
          padding: 0 10px;
          max-width: 80%;
          background-color: #fafafa;
          border-radius: 4px;
          line-height: 30px;
        }
        .text-img {
          display: inline-block;
          padding: 0 !important;
          max-width: 80%;
          border: 1px solid #E4E7ED;
        }
      }
      .main3 {
        text-align: right;
        .avatar {
          float: right;
          margin: 0 20px 0 10px;
          border-radius: 3px;
          width: 30px;
          height: 30px;
        }
        .text {
          display: inline-block;
          padding: 0 10px;
          max-width: 80%;
          background-color: #b2e281;
          border-radius: 4px;
          line-height: 30px;
        }
        .text-img {
          display: inline-block;
          padding: 0 !important;
          max-width: 80%;
          border: 1px solid #E4E7ED;
        }
      }
    }

    #uesrtext {
      // position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 120px;
      //border-top: dashed 2px #999093;
    }
    textarea {
      padding: 10px;
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
    }
  }

  .sidebar {
    float: left;
    color: #f4f4f4;
    background-color: transparent;
    width: 300px;
    height: 100%;

    .my-scroll-bars {
      height: 610px;
      overflow-x: hidden;
    }
    input-with-select {
      margin-top: 50px;
      padding-top: 20px;
    }
    .el-scrollbar__wrap {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
    .el-menu-item is-active {
      padding-left: 10px;
    }
    .el-menu-vertical-demo {
      background-color: #2e3238;
      width: 80px;
      height: 100%;
      /*opacity:0.8;*/
    }
    .leftlist {
      background-color: transparent;
      width: 90px;
      height: 700px;
      overflow-x: hidden;
    }
    .avatar {
      width: 45px;
      height: 45px;
      /*这个是图片和文字居中对齐*/
      border-radius: 5px;
      margin-top: 5px;
    }
    .el-scrollbar__wrap {
      background-color: #E4E7ED;
    }
    #el-scrollbar {
      background-color: #E4E7ED;
    }
    #list {
      background-color: #E4E7ED;
      width: 100%;
      overflow-x: hidden;
      li {
        height: 68px;
        padding: 7px 15px;
        border-bottom: 1px solid #E4E7ED;
        cursor: pointer;
        list-style: none;
        color: #505458;
        &:hover {
          background-color: rgba(0, 0, 0, 0.07);
        }
      }
      li.active {
        /*注意这个是.不是冒号:*/
        background-color: rgba(0, 0, 0, 0.1);
      }
      .avatar {
        border-radius: 2px;
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }
      .name {
        display: inline-block;
        margin-left: 15px;
        margin-top: 10px;
        margin-bottom: 0px;
      }
      img {
        margin-top: 10px;
      }
    }
  }

  // 滚动条样式
  .innerbox{
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
    font-size: .7rem;
    font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
    height: 100%;
  }
  /*滚动条样式*/
  .innerbox::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  .innerbox::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  .innerbox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }

  .main {
    position: relative;
    overflow: hidden;
    background-color: transparent;
  }
}

//清除ul，li样式
ul,li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
</style>
